<template>
  <div class="vs-item sm:flex sm:flex-col">
    <h2 class="text-gray-1000 text-22 leading-7 font-semibold break-words w-full sm:flex-shrink-0">
      {{$t('vs_trafficSources')}}
    </h2>
    <p class="text-base text-gray-1500 leading-7 mt-4 w-full sm:flex-shrink-0"
      v-if="toolsTraffic && toolsTraffic.echartRing && toolsTraffic.echartRing.data && Array.isArray(toolsTraffic.echartRing.data)">
      {{$t('vs_the6MainSources',{toolName: $websiteName(toolData)})}}{{getSourceDesc(toolsTraffic.echartRing.data)}}
    </p>
    <div class="mt-7 w-full sm:flex-1"
      v-if="toolsTraffic && toolsTraffic.echartRing && toolsTraffic.echartRing.data && Array.isArray(toolsTraffic.echartRing.data)">
      <div class="overflow-hidden border border-gray-2000 md:rounded-lg vs-table">
        <table class="max-w-full w-full divide-y divide-gray-2000  table-fixed">
          <tbody class="bg-white">
            <tr v-for="(item, key) in toolsTraffic.echartRing.data"
              :key="item.label">
              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-base font-medium text-gray-1000 sm:pl-6 truncate"
                style="width: 40%;">
                <div class="flex items-center">
                  <i class="dot flex-shrink-0"
                    :style="{ background: toolsTraffic.echartRing.colorsObj[item.labelKey] }"></i>
                  <span class="flex-1 w-0 truncate">{{ item.label }}</span>
                </div>
              </td>
              <td class="whitespace-nowrap px-3 py-4"
                style="width: 60%;">
                <span class="text-base font-semibold text-gray-1000 max-w-full">
                  {{ toolsTraffic.echartRing.total ? `${((item.value / toolsTraffic.echartRing.total) * 100).toFixed(2)}%`:0 }}
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="traffic-chart-box mt-10 w-full sm:flex-shrink-0"
      v-if="toolsTraffic && toolsTraffic.dataRange && toolsTraffic.dataRange.length===2 &&  toolsTraffic.echartRing && Array.isArray(toolsTraffic.echartRing.data)">
      <div class="date"
        v-if="toolsTraffic.dataRange.length===2">
        <svg-icon iconName="adschedule_default" />
        <span>{{toolsTraffic.dataRange[0]}} - {{toolsTraffic.dataRange[1]}}&nbsp;{{$t('vs_worldwideDesktopOnly')}}</span>
      </div>
      <no-ssr>
        <ring-chart :chartData="toolsTraffic.echartRing"
          :dId="`${toolData.handle}-ringChart`"></ring-chart>
      </no-ssr>
    </div>
    <el-empty v-else
      class="sm:flex-1"
      :description="$t('vs_noData')"></el-empty>
  </div>
</template>

<script>
export default {
  name: 'CompareVsTrafficSources',
  props: {
    toolData: {
      type: Object | null,
      default() {
        return {}
      },
    },
    toolsTraffic: {
      type: Object | null,
      default() {
        return {}
      },
    },
  },
  methods: {
    getSourceDesc(echartRingData) {
      let sourceDesc = ''
      if (echartRingData && Array.isArray(echartRingData)) {
        echartRingData.forEach((item) => {
          sourceDesc = `${sourceDesc}${sourceDesc ? ', ' : ''}${item.label} ${
            this.toolsTraffic.echartRing.total
              ? `${(
                  (item.value / this.toolsTraffic.echartRing.total) *
                  100
                ).toFixed(2)}%`
              : 0
          }`
        })
      }
      return sourceDesc
    },
  },
}
</script>
<style lang='scss' scoped>
.gap-tab {
  gap: 50px !important;
}

.date {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  svg {
    font-size: 18px;
    margin-right: 8px;
    margin-top: -2px;
  }
  span {
    font-size: 16px;
    color: #191919;
    line-height: 20px;
  }
}

.vs-table {
  tr {
    &:nth-child(even) {
      background: #f8f9fb;
    }
    td:last-child {
      border-left: 1px solid #e5e5e5;
    }
  }
}
.dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 12px;
}

.traffic-title {
  position: relative;
  font-size: 20px;
  color: #191919;
  line-height: 24px;
  padding-left: 15px;
  &::after {
    position: absolute;
    content: '';
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    background: #8333c2;
    border-radius: 1px;
  }
}
</style>